<template>
  <div>
    <RadioGroup v-model="wayBtn" type="button" button-style="solid" @on-change="getData">
      <Radio label="WEIBO_CONNECT_MEMBER">用户端</Radio>
      <Radio label="WEIBO_CONNECT_EXPERT">专家端</Radio>
    </RadioGroup>
    <div class="layout">
      <div class="row" v-for="(item, index) in appList" :key="index">
        <div class="col">
          <Card :padding="0">
            <!-- app -->
            <div class="icon-item" v-if="item.clientType == 'APP'">
              <img class="icon" :src="appImg" />
            </div>
            <div class="icon-item" v-if="item.clientType == 'PC'">
              <!-- pc -->
              <img class="icon" :src="pcImg" />
            </div>
            <div class="icon-item" v-if="item.clientType == 'WECHAT_MP'">
              <!-- 小程序 -->
              <img class="icon" :src="mpImg" />
            </div>
            <div class="icon-item" v-if="item.clientType == 'H5'">
              <!-- h5 -->
              <img class="icon" :src="h5Img" />
            </div>
            <div class="pay-title">{{ way[item.clientType] }}</div>
            <div>
              <Divider orientation="left">登录设置</Divider>
              <div class="pay-list">
                <Form style="width: 100%" :model="item" :label-width="80">
                  <FormItem label="appkey" prop="appkey">
                    <Input
                      @on-enter="setupSetting"
                      class="label-appkey"
                      v-model="item.appKey"
                    />
                  </FormItem>
                  <FormItem label="appSecret" prop="appSecret">
                    <Input @on-enter="setupSetting" v-model="item.appSecret" />
                  </FormItem>
                </Form>
                <Button @click="setupSetting">保存设置</Button>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSetting, setSetting } from "@/api/index";

import appImg from "@/assets/setting/app.svg"
import pcImg from "@/assets/setting/pc.svg";
import mpImg from "@/assets/setting/wechat_mp.svg";
import h5Img from "@/assets/setting/h5.svg";

export default {
  data() {
    return {
      appImg: appImg,
      pcImg: pcImg,
      mpImg: mpImg,
      h5Img: h5Img,
      way: {
        // 类型
        APP: "移动应用端",
        H5: "移动端",
        WECHAT_MP: "小程序端",
        PC: "PC端",
      },
      appList: {}, // 表单数据
      wayBtn: "WEIBO_CONNECT_MEMBER",
    };
  },
  props: ["res", "type"],
  created() {
    this.init();
  },
  methods: {
    // 保存
    setupSetting() {
      this.$Spin.show();
      setSetting(this.wayBtn, {
        qqConnectSettingItemList: this.appList,
      })
        .then((res) => {
          if (res.success) {
            this.$Message.success("保存成功!");
          }
        })
        .finally(() => {
          this.$Spin.hide();
        });
    },
    // 获取数据
    getData() {
      getSetting(this.wayBtn).then((res) => {
        if (res.code == 200) {
          this.appList = res.result.weiboConnectSettingItemList;
        }
      });
    },
    // 实例化数据
    async init() {
      this.appList = JSON.parse(this.res).weiboConnectSettingItemList;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../setting/style.scss";
.pay-title {
  text-align: center;
  margin: 10px 0;
}

.col {
  width: 100%;
}
.layout {
  padding: 20px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.row {
  width: 350px;
  margin-right: 20px;
  display: flex;
  margin-bottom: 20px;
  ::v-deep .ivu-card-body {
    padding: 0 16px !important;
  }
}

.label-item {
  display: flex;
}
.label-item {
  display: flex;
  align-items: center;
}
.pay-list {
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
  flex-direction: column;
  align-items: center;
  ::v-deep .ivu-btn {
    width: 100px;
  }
}
.icon-item {
  width: 100%;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.ivu-form-item {
  display: flex;

  align-items: center;
}
.ivu-row {
  width: 100%;
}
.icon {
  width: 100px;
  height: 100px;
}
</style>
